<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2023-02-16 13:31:18
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-16 13:43:46
 * @FilePath: \v2.0.0\src\views\patroling\PatrolingCamera.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-container class="h-full">
    <el-aside v-show="bottomTab === 0" class="w-48 bg-[#1f3947]">
      <div
        v-for="camera in cameraList"
        v-show="bottomTab === 0"
        :key="camera.id"
        class="mt-2 text-center text-white p-3 cursor-pointer"
        :class="{
          'bg-[#FF931E]': camera.visible,
        }"
        @click="() => setCameraVisible(camera)"
      >
        {{ camera.name }}
      </div>
    </el-aside>
    <el-main class="p-0 overflow-hidden">
      <div
        id="camera-container"
        class="grid h-full bg-[#072232]"
        :class="[gridDisplay]"
        :style="{
          height: cameraContainerHeight,
        }"
      >
        <template v-if="bottomTab === 0">
          <div
            v-for="camera in visibleCameras"
            :key="camera.id"
            type="camera"
            :style="{
              height: cameraHeight,
            }"
          >
            <CameraVideo :data="camera || {}"></CameraVideo>
          </div>
        </template>
        <slot></slot>
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, toRefs, watch } from "vue";
import { getByCode } from "@/api/robot-camera.js";
import { storeToRefs } from "pinia";
import usePatrolingStore from "@/store/patroling";
import CameraVideo from "@/components/CameraVideo.vue";

const props = defineProps<{
  bottomTab: number;
}>();

const { bottomTab } = toRefs(props);

const patrolingStore = usePatrolingStore();
const { patrolingInfo } = storeToRefs(patrolingStore);
const caritem = computed(() => {
  return patrolingInfo.value.robotid;
});

watch(caritem, () => {
  if (!caritem.value) return;
  getCameraList();
});

const cameraList = ref([]);
async function getCameraList() {
  const { data } = await getByCode(caritem.value, "patroling");
  cameraList.value = data;
  cameraList.value.forEach((item) => (item.visible = true));
}
const visibleCameras = computed(() => {
  return cameraList.value.filter((item) => item.visible);
});
const gridDisplay = computed(() => {
  if (bottomTab.value !== 0 || visibleCameras.value.length === 0) {
    return "grid-cols-1 grid-rows-1";
  } else if (visibleCameras.value.length === 1) {
    return "grid-cols-2 grid-rows-1";
  } else {
    return "grid-cols-2 grid-rows-2";
  }
});
const cameraHeight = computed(() => {
  const cameraContainer = document.getElementById("camera-container");
  return `${cameraContainer.clientHeight / 2}px`;
});

function setCameraVisible(camera) {
  camera.visible = !camera.visible;
}
const cameraContainerHeight = ref("");
onMounted(() => {
  const cameraContainer = document.getElementById("camera-container");
  cameraContainerHeight.value = `${cameraContainer.clientHeight}px`;
});
</script>
